<template>
  <div>
    <span slot="header">商品统计</span>
    <el-form class="df aic">
      <!-- 时间日期选择器 -->
      <el-form-item label="选择时间" class="demonstration">
        <el-date-picker size="mini" v-model="date"
          value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <!-- 查询 -->
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-card>
      <!-- echarts -->
      <div class="myChart" ref="chartRef"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { formatYMDhms } from "@/filters";
import { orderTotalReq } from "@/api/total";

export default {
  data() {
    return {
      date: [],
      searchForm: {},
    };
  },
  methods: {
    async getData() {
      // console.log("this.date :>> ", this.date);
      let res = await orderTotalReq({
        date: JSON.stringify(this.date),
      });
      // console.log("res :>> ", res);
      //解构数据
      let { data } = res.data;
      //处理数据
      let xData = data.map((v) => formatYMDhms(v.orderTime));
      // console.log("xData :>> ", xData);
      let series = [
        {
          type: "line",
          name: "金额数据",
          data: data.map((v) => v.orderAmount),
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgb(128, 255, 165)",
              },
              {
                offset: 1,
                color: "rgb(1, 191, 236)",
              },
            ]),
          },
        },
      ];

      //画图
      this.renderLine({
        xData,
        series,
        title: "金额图表",
      });
    },

    //画折线图
    renderLine(obj) {
      //默认值
      let defaultOptions = {
        title: "默认标题",
      };
      //最终参数 传入参数合并默认值
      let finalObj = { ...defaultOptions, ...obj };
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.chartRef);
      //配置项
      let options = {
        //图表标题
        title: {
          text: finalObj.title,
          left: 15,
          top: 15,
        },
        //工具提示
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        //图例组件展现了不同系列的标记(symbol)，颜色和名字。
        legend: {
          top: 15,
        },
        //工具箱
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },

        //网格
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: finalObj.xData.map(function (str) {
              return str.replace(" ", "\n");
            }),
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        //核心数据
        series: finalObj.series,
      };
      // 绘制图表
      myChart.setOption(options);
    },

    //查询---双向数据绑定
    search() {
      // console.log('999 :>> ', 999);
      this.searchForm = this.date;
      this.getData();
    },
  },
  created() {},
  mounted() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.el-form-item {
  width: 520px;
}
.myChart {
  height: 300px;
  background: white;
}
.el-card_body {
  background: #f0f2f5;
}
</style>
